<template>
  <div class="timing-container">
    <div class="switch" style="height: 30px;">
      <el-switch
        v-model="params.isRegularUpload"
        class="fb-switch"
      />
    </div>
    <div v-if="params.isRegularUpload" class="timing-params-list">
      <div class="timing-params-item">
        <el-radio-group v-model="params.timingType" @change="handelTimingType">
          <el-radio :label="1">定时更新</el-radio>
          <el-radio :label="2">趋势更新</el-radio>
        </el-radio-group>
      </div>
      <div class="timing-flex">
        <div class="timing-params-item mb-25">
          <span class="title">字段名称</span>
          <el-select
            v-model="params.timingField"
            popper-class="global-select-down"
            placeholder="字段名称"
            multiple
            size="small"
            name="timingField"
          >
            <el-option value="全部" label="全部" />
            <el-option
              v-for="item in fieldListOpt"
              :key="item.id"
              :label="item.name"
              :value="item.name" />
          </el-select>
        </div>

        <div v-if="params.timingType === 2" class="timing-params-item time mb-25">
          <span class="title">更新日期</span>
          <el-select
            v-model="params.trendTimeType"
            style="margin-right: 10px;"
            popper-class="global-select-down"
            class="width100"
            size="small"
            placeholder="字段名称"
            name="trendTimeType">
            <el-option
              v-for="item in trendTimeTypeOpt"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
          <el-date-picker
            v-model="params.trendTime"
            :picker-options="pickerOptions"
            :editable="false"
            type="daterange"
            size="small"
            value-format="timestamp"
            format="yyyy/MM/dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </div>
        <div class="timing-params-item mb-25">
          <span class="title">更新频率</span>
          <el-select
            v-model="params.frequency"
            popper-class="global-select-down"
            placeholder="更新频率"
            size="small"
            name="frequency">
            <el-option value="" label="请选择" />
            <template v-for="item in frequencyOpt">
              <el-option
                v-if="params.timingType === 1 || (params.timingType === 2 && item.key !== 'hour')"
                :key="item.key"
                :label="item.name"
                :value="item.key" />
            </template>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * 定时更新组件
 */
import ElMessage from '@/utils/message';
export default {
  name: 'Timing',
  props: {
    fieldListOpt: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      params: {
        isRegularUpload: false, // 是否开启定时更新
        timingType: 1, // 1: 定时更新 2:趋势更新
        timingField: [], // 字段名称
        frequency: '', // 更新频率，day: 每天  week: 每周   month: 每月   hour: 每小时
        trendTime: [], // 更新日期，数组第一个值为开始时间，第二个为结束时间
        trendTimeType: '下单日期'
      },
      frequencyOpt: [
        { key: 'hour', name: '每小时' },
        { key: 'day', name: '每天' },
        { key: 'week', name: '每周' },
        { key: 'month', name: '每月' }
      ],
      trendTimeTypeOpt: [
        { id: '下单日期', name: '下单日期' },
        { id: '到账日期', name: '到账日期' },
        { id: '更新日期', name: '更新日期' }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      isMessage: false
    };
  },
  methods: {
    setDefault(data) {
      this.$set(this.params, 'isRegularUpload', data.isRegularUpload || false);
      this.$set(this.params, 'timingType', data.timingType || 1);

      if (data.timingField && data.timingField.length === 0) {
        this.$set(this.params, 'timingField', ['全部']);
      } else {
        this.$set(this.params, 'timingField', data.timingField || []);
      }
      this.$set(this.params, 'trendTimeType', data.trendTimeType || '下单日期');
      this.$set(this.params, 'frequency', data.frequency || '');
      if (data.trendTime && data.trendTime.length === 2) {
        const beginTime = data.trendTime[0].length === 13 ? data.trendTime[0] : data.trendTime[0] * 1000;
        const endTime = data.trendTime[1].length === 13 ? data.trendTime[1] : data.trendTime[1] * 1000;
        this.$set(this.params, 'trendTime', [beginTime, endTime]);
      }
      this.isMessage = data.isRegularUpload;
    },
    getParams(isVerify) {
      const params = JSON.parse(JSON.stringify(this.params));
      if (!isVerify) {
        return params;
      } else {
        if (params.isRegularUpload) {
          if (params.timingField === '' || params.timingField.length <= 0) {
            ElMessage.warning('请选择定时更新的字段名称');
            return false;
          }
          if (params.timingType === 2) {
            if (!params.trendTime || params.trendTime.length !== 2) {
              ElMessage.warning('请选择定时更新日期');
              return false;
            }
            // if (params.trendTime[1] - params.trendTime[0] < 86400000) {
            //   ElMessage.warning('定时更新日期最小间隔为1天');
            //   return false;
            // }
            params.trendTime[0] = params.trendTime[0] / 1000;
            params.trendTime[1] = params.trendTime[1] / 1000;
          } else {
            params.trendTime = [];
            params.trendTimeType = '';
          }
          if (params.frequency === '') {
            ElMessage.warning('请选择定时更新频率');
            return false;
          }
          if (params.timingField.includes('全部')) {
            params.timingField = [];
          }
        } else {
          params.trendTime = [];
        }
        return params;
      }
    },
    // timingFieldChange(e) {
    //   console.log(e);
    //   if (e.includes('全部')) {
    //     this.params.timingField = ['全部'];
    //   }
    // },
    handelTimingType(e) {
      if (e === 2 && this.params.frequency === 'hour') {
        this.params.frequency = '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.timing-container {
  display: flex;
  .switch {
    margin-right: 22px;
  }
  .timing-params-list {
    margin-top: 8px;
  }
  .timing-flex {
    display: flex;
    align-items: center;
    margin-top: 25px;
    flex-wrap: wrap;
  }
}
.timing-params-item {
  display: flex;
  align-items: center;
  margin-right: 40px;
  &.mb-25 {
    margin-bottom: 25px;
  }
  .title {
    font-size: 14px;
    color: #666;
    margin-right: 12px;
  }
  ::v-deep {
    .el-select {
      .el-select__tags {
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
        & > span {
          display: flex;
          align-items: center;
        }
      }
      .el-tag.el-tag--info {
        color: #406EFF;
        background-color: #ecf1ff;
      }
      .el-input {
        width: 190px !important;
      }
      .el-input__inner {
        width: 190px !important;
      }
    }
    .width100 {
      .el-input {
        width: 100px !important;
      }
      .el-input__inner {
        width: 100px !important;
      }
    }
    .el-radio-group {
      display: flex;
      align-items: center;
    }
    .el-radio {
      display: flex;
      align-items: center;
      margin-right: 40px;
      .el-radio__input {
        display: flex;
        align-items: center;
        &.is-checked {
          .el-radio__inner {
            background: #fff;
            &::after {
              background-color: #406EFF;
              width: 6px;
              height: 6px;
            }
          }
        }
      }
      .el-radio__label {
        font-size: 14px;
        padding-left: 8px;
      }
    }
    .el-date-editor {
      .el-range-input {
        font-size: 13px;
      }
      .el-range-separator {
        width: 10%;
        display: flex;
        align-items: center;
        font-size: 13px;
      }
    }
  }
}
</style>
